import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import BaseLayout from '@/layout/Base.vue'

Vue.use(VueRouter)

const RouteView = {
  name: 'RouteView',
  render: (h: Function) => h('router-view'),
}

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'BaseLayout',
    component: BaseLayout,
    redirect: '/',
    children: [
      {
        path: '/',
        name: 'Home',
        component: () => import(/* webpackChunkName: "Home" */ '@/views/Home.vue'),
        meta: { title: '首页' },
      },
      {
        path: '/DTsFile',
        name: 'DTsFile',
        component: () => import(/* webpackChunkName: "DTsFile" */ '@/views/DTsFile/index.vue'),
        meta: { title: 'd.ts文件的使用' },
      },
      {
        path: '/AboutVue',
        name: 'AboutVue',
        component: RouteView,
        meta: { title: 'Vue相关' },
        redirect: '/AboutVue/DynamicAndAsync',
        children: [
          {
            path: 'DynamicAndAsync',
            name: 'DynamicAndAsync',
            component: () => import(/* webpackChunkName: "DynamicAndAsync" */ '@/views/AboutVue/DynamicAndAsync/index.vue'),
            meta: { title: '动态组件和异步组件' },
          },
          {
            path: 'SlotTest',
            name: 'SlotTest',
            component: () => import(/* webpackChunkName: "SlotTest" */ '@/views/AboutVue/SlotTest/index.vue'),
            meta: { title: 'jsx slot 插槽' },
          },
        ],
      },
      {
        path: '/AboutVuex',
        name: 'AboutVuex',
        component: RouteView,
        meta: { title: 'Vuex相关' },
        redirect: '/AboutVuex/test1',
        children: [
          {
            path: 'ProductList',
            name: 'ProductList',
            component: () => import(/* webpackChunkName: "ProductList" */ '@/views/AboutVuex/ProductList.vue'),
            meta: { title: 'vuex商品列表', keepAlive: true },
          },
          {
            path: 'CartList',
            name: 'CartList',
            component: () => import(/* webpackChunkName: "CartList" */ '@/views/AboutVuex/CartList.vue'),
            meta: { title: 'vuex购物车列表' },
          },
        ],
      },
      {
        path: '/Components',
        name: 'Components',
        component: RouteView,
        meta: { title: '自定义组件' },
        redirect: '/Components/TodoList',
        children: [
          {
            path: 'TodoList',
            name: 'TodoList',
            component: () => import(/* webpackChunkName: "TodoList" */ '@/views/Components/TodoList/index.vue'),
            meta: { title: '自定义的todoList', keepAlive: true },
          },
          {
            path: 'TablePage',
            name: 'TablePage',
            component: () => import(/* webpackChunkName: "TablePage" */ '@/views/Components/TablePage/index.vue'),
            meta: { title: '自定义的表格' },
          },
          {
            path: 'GridPage',
            name: 'GridPage',
            component: () => import(/* webpackChunkName: "GridPage" */ '@/views/Components/GridPage/index.vue'),
            meta: { title: '自定义的栅格' },
          },
          {
            path: 'TransitionPage',
            name: 'TransitionPage',
            component: () => import(/* webpackChunkName: "TransitionPage" */ '@/views/Components/TransitionPage/index.vue'),
            meta: { title: '自定义过渡测试' },
          },
          {
            path: 'NavBarPage',
            name: 'NavBarPage',
            component: () => import(/* webpackChunkName: "NavBarPage" */ '@/views/Components/NavBarPage/index.vue'),
            meta: { title: '自定义导航栏', hidden: true },
          },
        ],
      },
      {
        path: '/Style',
        name: 'Style',
        component: RouteView,
        meta: { title: '样式' },
        redirect: '/Style/Sass',
        children: [
          {
            path: 'Sass',
            name: 'Sass',
            component: () => import(/* webpackChunkName: "Sass" */ '@/views/Style/Sass/index.vue'),
            meta: { title: 'sass' },
          },
          {
            path: 'Turntable',
            name: 'Turntable',
            component: () => import(/* webpackChunkName: "Turntable" */ '@/views/Style/Turntable/index.vue'),
            meta: { title: '抽奖转盘' },
          },
          {
            path: 'BFC',
            name: 'BFC',
            component: () => import(/* webpackChunkName: "BFC" */ '@/views/Style/BFC/index.vue'),
            meta: { title: 'BFC测试' },
          },
        ],
      },
      {
        path: '/Utils',
        name: 'Utils',
        component: RouteView,
        meta: { title: '工具' },
        redirect: '/Utils/UtilsTest',
        children: [
          {
            path: 'UtilsTest',
            name: 'UtilsTest',
            component: () => import(/* webpackChunkName: "UtilsTest" */ '@/views/Utils/UtilsTest.vue'),
            meta: { title: 'UtilsTest' },
          },
        ],
      },
      {
        path: '/Plugins',
        name: 'Plugins',
        component: RouteView,
        meta: { title: '插件' },
        redirect: '/Plugins/MessageTest',
        children: [
          {
            path: 'MessageTest',
            name: 'MessageTest',
            component: () => import(/* webpackChunkName: "MessageTest" */ '@/views/Plugins/MessageTest.vue'),
            meta: { title: '自定义消息插件' },
          },
        ],
      },
      {
        path: '/Swiper',
        name: 'Swiper',
        component: RouteView,
        meta: { title: 'Swiper' },
        redirect: '/Swiper/Example',
        children: [
          {
            path: 'Example',
            name: 'SwiperExample',
            component: () => import(/* webpackChunkName: "SwiperExample" */ '@/views/Swiper/Example/index.vue'),
            meta: { title: 'Swiper实例' },
          },
          {
            path: 'Poster',
            name: 'Poster',
            component: () => import(/* webpackChunkName: "Poster" */ '@/views/Swiper/Poster/index.vue'),
            meta: { title: '海报', hidden: true },
          },
        ],
      },
    ],
  },
]

const router = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router
